<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Start Stop</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#slider').cycle({
		pager: '#slider-pager'
	});
	
	$('.activetab a').each( function() {
	 	var activeTab = $(this).parents('li').index();
	 	var paneVisible	= $(this).parents('ul').next().children('div').eq(activeTab);
	 	paneVisible.show().siblings().hide();
	});
		 
	$('.tabs a').click( function() {	 
	 	$(this).parents('li').addClass('activetab').siblings().removeClass('activetab'); 		 	
	 	var activeTab = $(this).parent('li').index();
		var paneVisible	= $(this).parents('ul').next().children('div').eq(activeTab);
		paneVisible.show().siblings().hide();
	 	return false;
	});
	
	$('.toggle').click(function(){
		$(this).parents('h3').siblings('.box-content').slideToggle('fast');
		$(this).toggleClass('closed');
		return false;
	})
	
	$('#more').mouseenter( function () { $('#dd').show(); });
	$('#dd').mouseleave( function () { $('#dd').hide(); });

	
	
});
</script>

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" /><![endif]-->
</head>

<body>
<div id="page">

	<div id="header" class="hp section">
		<div id="top" class="group">
			<a href="#" class="home medium">Home</a>
			
			<div id="top-search"><input type="text" /></div>
			
			<ul class="medium">
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</div><!-- /top -->
		
		<div id="logo">
			<a href="#"><img src="images/logo.png" alt="" /></a>
		</div><!-- /logo -->
		
		<a href="#" id="banner">
			<img src="images/dummy1.png" alt="" />
		</a><!-- /banner -->	
	</div><!-- /header -->
	
	<div id="hero-wrap">
		<div id="hero" class="profile section group">
			<div id="user-profile" class="group">
				<img src="images/icon_pr.png" alt="" />
				<div>
					Username: <span class="group">Thanos</span>
					<a href="#" id="more">More</a>
					<ul id="dd">
						<li><a href="#">Some option</a></li>
						<li><a href="#">Some option</a></li>
						<li><a href="#">Some option</a></li>
						<li><a href="#">Some option</a></li>
						<li><a href="#">Some option</a></li>
					</ul>
				</div>
				<p>Member since: <span>19/02/2010</span></p>
			</div><!-- /user-profile -->
			
			<ul id="user-stats">
				<li id="trophies">Trophies <span>12</span></li>
				<li id="friends">Friends <span>98</span></li>
				<li id="level">Level <span>25</span></li>
			</ul><!-- /user-stats -->			
		</div><!-- /hero -->
	</div><!-- /hero-wrap -->
	
	<div id="profile-wrap">
		
		<div id="profile" class="section group">
	
		<div id="bc">
			You are here: <a href="#">Page</a> <a href="#">Page</a>
		</div><!-- /breadcrumb -->
		
		<div id="notice" class="group">
			<p>You are not logged into Startstop, create an account and you can logged your own usage, find people who use this application and more!</p>
			<a href="#" class="btn-signup">Sign up</a>
		</div><!-- /notice -->
			
			<div class="row group">			
				<div class="box onethird floatleft">
					<h3>Header <a href="#" class="toggle">Toggle</a></h3>
					<div class="box-content">
						<ul>
							<li>
								<a href="#">This trophy</a>
								<p>This is a description over here.</p>
							</li>
							<li>
								<a href="#">This trophy</a>
								<p>This is a description over here.</p>
							</li>
							<li>
								<a href="#">This trophy</a>
								<p>This is a description over here.</p>
							</li>
							<li>
								<a href="#">This trophy</a>
								<p>This is a description over here.</p>
							</li>
						</ul>
						<div id="progress">
							<h4>Award Progress</h4>
							<p><span style="width:82%"></span></p>
						</div>
					</div><!-- /box-content -->
					<a href="#" class="view-all">View all</a>
				</div><!-- /box -->				
				<div class="box onethird floatleft">
					<h3 class="orange">Header <a href="#" class="toggle">Toggle</a></h3>
					<div class="box-content">
						<ul class="relative">
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
						</ul>
					</div><!-- /box-content -->
					<a href="#" class="view-all">View all</a>
				</div><!-- /box -->				
				<div class="box onethird floatright last">
					<h3 class="red">Header <a href="#" class="toggle">Toggle</a></h3>
					<div class="box-content">
						<ul class="relative">
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
							<li>
								<a href="#">Nick cave</a>
								<p>is online</p>
							</li>
						</ul>
					</div><!-- /box-content -->
					<a href="#" class="view-all">View all</a>
				</div><!-- /box -->				
			</div>
			
			<div class="row group">				
				<div class="box onehalf floatleft">
					<h3 class="green">Header <a href="#" class="toggle">Toggle</a></h3>
					<div class="box-content">
						content
					</div><!-- /box-content -->
				</div><!-- /box -->

				<div class="box onehalf floatright">
					<h3 class="blue">Header <a href="#" class="toggle">Toggle</a></h3>
					<div class="box-content">
						content
					</div><!-- /box-content -->
				</div><!-- /box -->							
			</div><!-- /group -->		

			<div class="row">
				<div class="box full">
					<h3>Header <a href="#" class="toggle">Toggle</a></h3>
					<div class="box-content">
						content
					</div><!-- /box-content -->
				</div><!-- /box -->
			</div>

			
		</div><!-- /news -->
	</div><!-- /news-wrap -->
	
	<div id="footer-wrap">
		<div id="footer" class="section group">
			
			<div class="footerblock mar90">
				<h5>Header</h5>
				<ul id="flinks">
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
				</ul>
			</div><!-- /fblock -->
			
			<div class="footerblock long mar80">
				<h5>Header</h5>
				<ul>
					<li class="group"><img src="images/fimg.png" alt="" /> <a href="#">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.</a></li>
					<li class="group"><img src="images/fimg.png" alt="" /> <a href="#">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.</a></li>					
				</ul>
				<a href="#" class="link-right">Link</a>
			</div><!-- /fblock -->
			
			<div class="footerblock">
				<h5>Header</h5>
				<ul id="tg">
					<li><a href="#">Deus Ex: Human Revolution</a> <span>Aug 18th</span></li>
					<li><a href="#">Deus Ex: Human Revolution</a> <span>Aug 18th</span></li>
					<li><a href="#">Deus Ex: Human Revolution</a> <span>Aug 18th</span></li>
				</ul>
				<a href="#" class="link-right">Link</a>
			</div><!-- /fblock -->
			
		</div><!-- /footer -->
	</div><!-- /footer-wrap -->
	
	<div id="credits-wrap">
		<div id="credits" class="section">
			<p>Copyright &copy; 2011</p>
			<p id="links"><a href="#">Some links</a></p>
		</div><!-- /credits -->
	</div><!-- /credits-wrap -->

</div><!-- /page -->
</body>
</html>